<script setup lang="ts">
import type { Dayjs } from 'dayjs';

import { computed, ref } from 'vue';

import { MdiDownBold, MdiUpBold } from '@vben/icons';

import {
  Button,
  Divider,
  InputSearch,
  RadioGroup,
  RangePicker,
  Select,
} from 'ant-design-vue';
import dayjs from 'dayjs';

const props = defineProps({
  form: {
    type: Object,
    default: () => ({}),
  },
  countTotal: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:form', 'upList']);

// 定义默认值常量
const DEFAULT_FORM_VALUES = {
  orderNo0rName: '',
  dateType: 1,
  startDate: '',
  endDate: '',
  orderType: '',
  orderState: '',
  roomType: '',
};

const data = computed({
  get() {
    return props.form;
  },
  set(newValue) {
    emit('update:form', newValue);
  },
});

const countTotal = computed(() => {
  return props.countTotal;
});
// 状态tab列表
const tabList = computed(() => {
  return [
    {
      label: '未处理订单',
      value: 1,
      count: countTotal.value.unhandledOrderNum || 0,
    },
    {
      label: '今日新订',
      value: 2,
      count: countTotal.value.newOrderNum || 0,
    },
    {
      label: '今日入住',
      value: 3,
      count: countTotal.value.checkInOrderNum || 0,
    },
    {
      label: '待入住',
      value: 4,
      count: countTotal.value.pendingCheckInOrderNum || 0,
    },
    { label: '已入住', value: 5, count: 0 },
    { label: '全部订单', value: '', count: 0 },
  ];
});
// 日期类型
const optionsDateType = ref([
  {
    label: '入住日期',
    value: 2,
  },
  {
    label: '预定日期',
    value: 1,
  },
  {
    label: '离店日期',
    value: 3,
  },
]);
// 日期tab选择
const dateTabs = [
  { label: '全部', value: 'all' },
  { label: '今日', value: '0' },
  { label: '过去七天', value: '-7' },
  { label: '未来七天', value: '7' },
  { label: '自定义', value: '30' },
];
// 日期tab选择
const dateTabsVlaue = ref('all');
// 自定义日期范围
type RangeValue = [Dayjs, Dayjs];
const dateRange = ref<RangeValue>();
// 是否显示更多筛选条件
const showMore = ref(false);

// 更新订单列表
const upList = () => {
  emit('upList');
};
// 日期tab切换
const changeDateTabs = () => {
  if (dateTabsVlaue.value === 'all') {
    data.value.startDate = '';
    data.value.endDate = '';
  } else {
    // 获取当天时间，然后把dateTabsVlaue.value值转成number，加上当前时间，得到开始时间和结束时间
    const day = Number(dateTabsVlaue.value);
    const start = dayjs().add(Math.min(day, 0), 'day').format('YYYY-MM-DD');
    const end = dayjs().add(Math.max(day, 0), 'day').format('YYYY-MM-DD');
    data.value.startDate = start;
    data.value.endDate = end;
  }
  dateRange.value = [dayjs(data.value.startDate), dayjs(data.value.endDate)];
  upList();
};

// 订单类型
const optionsOrderType = ref([
  {
    label: '全部订单类型',
    value: '',
  },
  {
    label: '新订',
    value: 1,
  },
  {
    label: '修改',
    value: 2,
  },
  {
    label: '取消',
    value: 4,
  },
  {
    label: '续住',
    value: 3,
  },
]);

// 订单状态
const optionsOrderState = computed(() => {
  const arr = [
    {
      label: '全部订单状态',
      value: '',
    },
    {
      label: '待处理',
      value: 2,
    },
    {
      label: '已接单',
      value: 3,
    },
    {
      label: '已拒单',
      value: 31,
    },
    {
      label: '已取消',
      value: 6,
    },
    {
      label: '已完成',
      value: 5,
    },
    {
      label: '过时取消',
      value: 7,
    },
  ];
  let dataArr;
  switch (data.value.tabState) {
    case 2: {
      dataArr = arr.filter((item) => item.value !== 5);

      break;
    }
    case 3: {
      dataArr = arr.filter((item) => item.value !== 5 && item.value !== 6);
      break;
    }
    case 4: {
      dataArr = arr.filter(
        (item) => item.value !== 5 && item.value !== 6 && item.value !== 31,
      );
      break;
    }
    default: {
      dataArr = arr;
    }
  }
  return dataArr;
});

// tab切换事件
const changleTab = (e: number | string) => {
  data.value.tabState = e;
  data.value.orderState = '';
  upList();
};
// 日期范围选择
const changleDate = () => {
  if (dateRange.value) {
    data.value.startDate = dateRange.value[0].format('YYYY-MM-DD') || '';
    data.value.endDate = dateRange.value[1].format('YYYY-MM-DD') || '';
  }
  upList();
};

// 表单重置
const formReset = () => {
  dateTabsVlaue.value = 'all';
  Object.assign(data.value, DEFAULT_FORM_VALUES);
  dateRange.value = undefined;
  upList();
};
</script>

<template>
  <div
    :class="[data.tabState !== 1 ? 'pb-3' : '']"
    class="card-box mb-3 flex w-full flex-col rounded-none border-none px-3"
  >
    <!-- tab切换 -->
    <div class="flex flex-wrap">
      <div
        v-for="(item, index) in tabList"
        :key="index"
        :class="[
          data.tabState === item.value
            ? 'text-primary tab-active font-bold'
            : '',
        ]"
        class="relative mr-2 cursor-pointer select-none px-4 py-3"
        @click="changleTab(item.value)"
      >
        {{ item.label || '' }}
        <span
          v-if="item.count && item.count > 0"
          class="absolute left-[100%] top-[2px] ml-[-16px] flex h-[20px] min-w-[20px] items-center justify-center rounded-full bg-red-500 px-1.5 text-xs text-white"
        >
          {{ item.count }}
        </span>
      </div>
    </div>
    <Divider class="m-0" />
    <!-- 筛选表单 -->
    <div v-if="![1].includes(data.tabState)">
      <div class="mt-3 flex flex-wrap">
        <InputSearch
          v-model:value="data.orderNo0rName"
          :allow-clear="true"
          class="mr-2"
          placeholder="客人姓名/订单号"
          style="width: 240px"
          @search="upList"
        />
        <Select
          v-if="data.tabState === ''"
          v-model:value="data.dateType"
          :options="optionsDateType"
          class="mr-2"
          style="width: 120px"
          @change="upList"
        />
        <template v-if="![2, 3].includes(data.tabState)">
          <RadioGroup
            v-if="dateTabsVlaue !== '30'"
            v-model:value="dateTabsVlaue"
            :options="dateTabs"
            class="mr-2"
            option-type="button"
            @change="changeDateTabs"
          />
          <Button
            v-if="dateTabsVlaue === '30'"
            class="allBut rounded-e-none border-r-0"
            @click="
              () => {
                dateTabsVlaue = 'all';
                data.startDate = '';
                data.endDate = '';
                dateRange = undefined;
                upList();
              }
            "
          >
            <span>全部</span>
          </Button>
          <RangePicker
            v-if="dateTabsVlaue === '30'"
            v-model:value="dateRange"
            :allow-clear="false"
            class="mr-2 rounded-s-none"
            style="width: 230px"
            @change="changleDate"
          />
        </template>
        <Select
          v-if="data.tabState === ''"
          v-model:value="data.orderType"
          :options="optionsOrderType"
          class="mr-2"
          style="width: 140px"
          @change="upList"
        />
        <Select
          v-if="![5].includes(data.tabState)"
          v-model:value="data.orderState"
          :options="optionsOrderState"
          class="mr-2"
          style="width: 140px"
          @change="upList"
        />
        <div
          v-if="false"
          class="hover:text-primary flex cursor-pointer select-none items-center opacity-80"
          @click="showMore = !showMore"
        >
          <span class="mr-1">更多</span>
          <MdiUpBold v-if="showMore" />
          <MdiDownBold v-else />
        </div>
        <div class="flex items-center px-1">
          <Divider type="vertical" />
        </div>
        <Button class="px-0" type="link" @click="formReset">重置</Button>
      </div>
      <div v-if="showMore" class="mt-3 flex flex-wrap">
        <!-- 后端暂时没做此筛选 -->
        <InputSearch
          v-if="false"
          v-model:value="data.roomType"
          :allow-clear="true"
          class="mr-2"
          placeholder="房型"
          style="width: 240px"
          @search="upList"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.ant-radio-button-wrapper) {
  padding-inline: 10px;
}

:deep(.allBut.ant-btn) {
  padding-right: 10px;
  padding-left: 10px;
}

.text {
  color: hsl(var(--card-foreground));
}

.tab-active::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 2px;
  content: '';
  background: hsl(var(--primary));
}
</style>
